<template>
    <div style="display: none">
        <slot v-if="ready" />
    </div>
</template>

<script>
import { propsBinder, findRealParent } from "../../utils";
import LayerGroupMixin from "../../mixins/LayerGroup.js";
import Options from "../../mixins/Options.js";
import { layerGroup, DomEvent } from "leaflet";

/**
 * Group together elements of the maps  including: markers, geoJSON, polylines and polygon, tooltip and popup.
 */
export default {
    name: "LLayerGroup",
    mixins: [LayerGroupMixin, Options],
    data() {
        return {
            ready: false,
        };
    },
    mounted() {
        this.mapObject = layerGroup();
        propsBinder(this, this.mapObject, this.$options.props);
        DomEvent.on(this.mapObject, this.$listeners);
        this.ready = true;
        this.parentContainer = findRealParent(this.$parent);
        this.parentContainer.addLayer(this, !this.visible);
        this.$nextTick(() => {
            /**
             * Triggers when the component is ready
             * @type {object}
             * @property {object} mapObject - reference to leaflet map object
             */
            this.$emit("ready", this.mapObject);
        });
    },
};
</script>
